<template>
  <el-table v-if="idCpu" :data="businessProcess" style="width: 100%">
    <el-table-column type="index" label="流程" width="50">
    </el-table-column>
    <el-table-column prop="businessTypeName" label="业务类型" width="180">
      <template slot-scope="scope">
        <span v-if="!!scope.row.step && scope.row.step==='3' && scope.row.businessState==='HANDLED'" style="color:green">{{scope.row.businessTypeName}}</span>
        <span v-else-if="!!scope.row.step && scope.row.step==='3' && scope.row.businessState!=='HANDLED'" style="color:red">{{scope.row.businessTypeName}}</span>
        <span v-else>{{scope.row.businessTypeName}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="commitUser" label="提交人" width="180"></el-table-column>
    <el-table-column prop="role" label="角色" width="80"></el-table-column>
    <el-table-column prop="optTime" label="操作时间" width="180"></el-table-column>
    <el-table-column prop="result" label="结果" width="80"></el-table-column>
    <el-table-column prop="remark" label="备注"></el-table-column>
  </el-table>
</template>

<script>
import request from "@/utils/Request";

export default {
  name: "BusinessProcess",
  props: {
    id: {
      type: String,
      default: '',
      required: true
    },
  },
  data() {
    return {
      businessProcess: []
    }
  },
  mounted() {

  },
  methods: {},
  computed: {
    idCpu() {
      if (this.id) {
        request.get("/openCardOrder/businessProcess", {params: {id: this.id}}).then(({data}) => {
          if (data.success) {
            this.businessProcess = data.data;
          } else {
            throw new Error()
          }
        }).catch(err => {
          this.$message({type: 'error', message: "查询业务流程失败"});
          console.log(err)
        });
        return this.id;
      }
      return '';
    }
  },
}
</script>

<style scoped>

</style>